<template>
    <div class="adminRole">
      <el-form ref="formRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
        <el-form-item label="交管名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入交管名称" clearable class="!w-[200px]" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="onSearch">
            搜索
          </el-button>
          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      
      <PureTableBar title="交管管理" :columns="columns" @refresh="onSearch">
        <template #buttons>
          <el-button type="success" :icon="useRenderIcon(AddFill)" >
            交管设置
          </el-button>
          <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
            新增交管
          </el-button>
        </template>
        <template v-slot="{ size, dynamicColumns }">
          <pure-table ref="tableRef" adaptive align-whole="center" row-key="Id" showOverflowTooltip table-layout="auto"
            :loading="loading" :size="size" :data="dataList" :columns="dynamicColumns" :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false" :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
            <template #operation="{ row }">
              <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
                @click="crossUpdate(row.id)">
                编辑
              </el-button>
              <el-button class="reset-margin" link type="danger" :size="size" :icon="useRenderIcon(outlineDelete)"
                @click="handleDelete(row)">
                删除
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
     
  </template>
  
  <script lang='ts' setup>
  import { PureTableBar } from "@/components/RePureTableBar";
  import { useRenderIcon } from "@/components/ReIcon/src/hooks";
  import { useDept } from "../utils/hook";
  import { ref } from 'vue'
  import { getCross } from '@/utils/api/dispatch/cross'
  import mapCross from "./components/mapCross.vue";
  
  // iconify-icons
  import AddFill from "@iconify-icons/ri/add-circle-line";
  import EditPen from "@iconify-icons/ep/edit-pen";
  import outlineDelete from '@iconify-icons/ic/outline-delete';
  import Search from "@iconify-icons/ep/search";
  import Refresh from "@iconify-icons/ep/refresh";
  
  const formRef = ref();

  
  // 路段编辑
  async function crossUpdate(id: number) {
    let { Content } = await getCross(id)
    openDialog('编辑', Content)
  }
  
  const {
    columns,
    loading,
    dataList,
    openDialog,
    handleDelete,
    form,
    onSearch,
    resetForm,
    pagination,
    handleSizeChange,
    handleCurrentChange
  } = useDept();
  
  </script>
  
  <style lang="scss" scoped>
  .search-form {
    :deep(.el-form-item) {
      margin-bottom: 12px;
    }
  }
  
  </style>